@import './base.less';

// 头部
header{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    height: 11.7333vw;
    width: 100%;
    padding: 1.8667vw 0.8vw;display: flex;
    background-color: #fff;

    a{
        font-family: '楷体';
        display: block;
        width: 8vw;
        height: 8vw;
        text-align: center;
        line-height: 8vw;
    }
    p{
        flex: 1;
        text-align: center;
        line-height: 2;
        font-weight: 700;
    }
}

.main{
    margin-top: 11.7333vw;
    // padding: 2.6667vw;
    background-color: #f7f7f7;
    height: 186.6667vw;
    .search{
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 8.5333vw;

            // text-align: center;
            // line-height: 8.5333vw;
            .search-s{
                width: 100%;
                a{
                    background-color: #fff;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex: 1;
                    padding: 1.6vw;
                    border-radius: 3.7333vw;
                }
            }
            .click{
                width: 8vw;
                // height: 8vw;
                height: 100%;
                // padding-right: 3.2vw;
                text-align: center;
                line-height: 8vw;
            }
        }
        .tab{
            margin-top: 1.3333vw;
            height: 12vw;
            display: flex;
            justify-content: space-around;
            text-align: center;
            line-height: 12vw;
            font-size: 3.7333vw;
            background-color: #fff;
            p{
                width: 33%;
            }
            p:nth-child(3){
                display: flex;
                justify-content: center;
                align-items: center;
                // height: 6.6667vw;
               span:nth-child(2){
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                margin-left: 1.0667vw;
                i:nth-child(1){
                    transform: rotate(90deg);
                    transform-origin: right bottom;
                    display: inline-block;
                    font-size: 3.2vw;
                    height: 7.2vw;
                }
                i:nth-child(2){
                    transform: rotate(270deg);
                    transform-origin: right top;
                    height: 7.2vw;
                    font-size: 3.2vw;
                    line-height: 1;
                    margin-right: 1.0667vw;


                }
               }
            }
        }
        .content{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            background-color: #f7f7f7;
            .box{
                width: 49%;
                height: 66.1333vw;
                padding: 0.8vw;
                background-color: #fff;
                img{
                    width:48vw;
                    height: 48vw;
                }
                p{
                    font-size: 3.4667vw;
                }
                span{

                    font-size: 4vw;
                    color: #fa2209;
                    margin-right: 1.0667vw;
                }
                del{
                    font-size: 3.2vw;
                    color: #999;

                }
            }
        }
    }



    .active{
        color: #e49a3d;
    }